<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>FineDrawio | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="FineDrawio
项目介绍
开源地址
https://gitee.com/shixixiyue/fine-drawio-public
给开源项目 drawio 用 FineUI 套了个壳，
其他开源项目用的或在线流程图的drwaio版本..." />
    <meta name="keywords" content=".Net Core" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">FineDrawio</h2>
            <div class="post-date">2023-01-29
            
                
                  <a href="https://shixixiyue.gitee.io/tag/4gOKry8Qv/" class="tag">
                    .Net Core
                  </a>
                
            </div>
            
              <div class="feature-container" style="background-image: url('https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/836023504c3440a290a4d5332791d3af~tplv-k3u1fbpfcp-watermark.image?')">
              </div>
            
            <div class="post-content" v-pre>
              <h1 id="finedrawio">FineDrawio</h1>
<h2 id="项目介绍">项目介绍</h2>
<p>开源地址<br>
https://gitee.com/shixixiyue/fine-drawio-public</p>
<p>给开源项目 drawio 用 FineUI 套了个壳，</p>
<p>其他开源项目用的或在线流程图的drwaio版本有些老，所以自己包了一层。</p>
<p>由于核心代码在前端，所以没有将整个项目开源，另外FineUI社区版是付费星球可以下载到的，所以也没有包含在项目中；在这里我先介绍说明一下，发布的完整版我会上传到星球，可以直接用；</p>
<p>TEST包含完整的前端示例，可以满足需求，即大家自己套壳也够用了。这里说的套壳的意思是 drawio 绘图的文件会存到浏览器缓存，我套一层将文件输出保存到数据库，增加用户设置，这样就可以发布到公司服务器在线使用了， 不用装桌面版本。</p>
<h3 id="环境">环境</h3>
<p>.Net6 : FineUICore8.1 + <a href="https://gitee.com/mirrors/drawio/tree/dev/src/main/webapp">drawio 20.6.0</a> + MySql</p>
<h4 id="演示地址">演示地址</h4>
<p><a href="http://101.201.67.76:8093/">http://101.201.67.76:8093/</a>  test 123456 我自己的服务器，请不要祸祸</p>
<h3 id="功能展示">功能展示</h3>
<p>功能：管理员新增用户，登录，新建文件夹，新建文件，复制文件，自动保存</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/836023504c3440a290a4d5332791d3af~tplv-k3u1fbpfcp-watermark.image?" alt="图片.png" loading="lazy"><br>
主目录</p>
<figure data-type="image" tabindex="1"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75ef1ec5d7f54b38a81f7f146855ba71~tplv-k3u1fbpfcp-zoom-1.image" alt="" loading="lazy"></figure>
<p>修改文件</p>
<figure data-type="image" tabindex="2"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/697eb3f6f64b4949873f76b4f3d3202e~tplv-k3u1fbpfcp-zoom-1.image" alt="" loading="lazy"></figure>
<p>复制和删除</p>
<figure data-type="image" tabindex="3"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2ee02ada87f4d3c9c1f64de06feb41d~tplv-k3u1fbpfcp-zoom-1.image" alt="" loading="lazy"></figure>
<p>后台添加用户</p>
<figure data-type="image" tabindex="4"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95c004ff75384f139853d6459ab250a0~tplv-k3u1fbpfcp-zoom-1.image" alt="" loading="lazy"></figure>
<h3 id="代码说明">代码说明</h3>
<p>drawio的资料在网上着实的少，翻来覆去 这两篇文章对我的帮助很大，</p>
<p><a href="https://bbs.huaweicloud.com/blogs/360814">Github好码推荐-一键集成Drawio 绘图</a></p>
<p><a href="https://blog.csdn.net/xcdt123/article/details/125120615">DrawIO二次开发</a></p>
<p>这两个文章要先看，我这里做补充说明。</p>
<h4 id="drawio-embed">drawio-embed</h4>
<p>首先 核心代码是 drawio-embed.js 可以在TEST 看到代码，drwaio 项目本身就带这个文件 TEST\Drawiojs\drawio-embed.js，这里我做了配置修改，这个文件的作用就是将 drwaio 作为iframe嵌入 ，可以控制设计页面的打开，关闭，监听事件，触发方法等。</p>
<p>drawio 本身会抛出事件通过 window.dispatchEvent(new Event(&quot;xxx&quot;));</p>
<p>外部可以通过 window.addEventListener(&quot;message&quot;, fun);监听抛出的事件和参数 搜索【bindEventListener】，通过 window.postMessage 向 iframe 触发事件 搜索【sendMsgToDrawio】</p>
<p>所以 drawio-embed.js 就是一个中间件，他会监听 drwaio 的原始事件，并抛出；也有对外api以事件方式触发 drwaio 的方法；</p>
<p>当然在 drawio-embed.js 里也扩展了自己的方法，[&quot;showMask&quot;, &quot;hideMask&quot;, &quot;showSpinner&quot;, &quot;hideSpinner&quot;, &quot;setTitle&quot;]</p>
<figure data-type="image" tabindex="5"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f784117fc3d6411e93f5bdefbbf6d1f0~tplv-k3u1fbpfcp-zoom-1.image" alt="" loading="lazy"></figure>
<h4 id="iframe参数">iframe参数</h4>
<p>drawio-embed 打开了一个iframe地址，默认是 &quot;<a href="https://www.draw.io/%22">https://www.draw.io/&quot;</a> 即官网地址，其实 drwaio 本身的webapp就可以使用，打开index.html后会将文件保存在本地或者网盘什么的，这样不满足需求，所以drwaio的index.html 接收好多参数，可以定制页面，在drawio-embed.js 就是 var queryStr = 参数，<a href="https://www.diagrams.net/doc/faq/embed-mode">参数的说明</a>  我没有找到，通过翻源码 和 测试总结了一下</p>
<pre><code>//ui sketch 白板 minimal 不带图标 atlas 带图标

//embed 0 1 不知道

//spin 0 1不知道

//dev 调试

//lang 语言

//autosave 没啥用

var queryStr = &quot;embed=1&amp;ui=minimal&amp;spin=1&amp;proto=json&amp;dev=1&amp;lang=zh&amp;autosave=1&quot;;
</code></pre>
<p>PreConfig.js 和 PostConfig.js 也可以配置，但是我不会。</p>
<p>dev 是调试模式，再该模式下，会加载未压缩的js，在 js\diagramly 路径下；否则将 加载 app.min.js</p>
<h4 id="drwaio">drwaio</h4>
<p>对于drwaio 我没有改源码，这样会影响升级，所以将扩展 放到了drawio-embed.js 中，唯一修改的地方是 index.html；一个是geBasePath mxBasePath，这是dev模式下js文件的路径；还有一个是 App.main() 这个方法有两处，一个是dev模式一个不是dev模式，App.main() 方法接收一个回调方法（从源码中看见的），回调的参数就是 当前的 App实例，</p>
<pre><code>App.main((ui) =&gt; {

    DrawioUI = ui;

});
</code></pre>
<p>这里的DrawioUI就是当前编辑器的实例了，将这个实例打印一下，就可以看到所有的drwaio原始方法；</p>
<figure data-type="image" tabindex="6"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7434317ae1f343a2ac98f8e1d5926cfc~tplv-k3u1fbpfcp-zoom-1.image" alt="" loading="lazy"></figure>
<p>再通过drawio-embed.js抛出，就可以在最上层直接操作drawio了，这里主要有这几个属性</p>
<p>DrawioUI.editor 当前实例的编辑器，这里是ui的dom，显示的按钮，菜单都在这里，可以添加或修改UI；</p>
<p>DrawioUI.actions.actions 这里是drawio的所有功能，可以看到 drawio 的功能和 ui 是解耦的，注册功能 包括 功能的key（save,open,close）等，lable 显示名称（通过语言包），funct 执行的方法，shortcut 快捷键，等；ui在调用时 调用的是 funct ，比如</p>
<pre><code>mxEvent.addListener(div, 'click', this.actions.get('openLibrary').funct);
</code></pre>
<p>再比如，在前台我们可以直接调用  DrawioUI.actions.actions.exportXml.funct();  打开导出的窗口</p>
<p>如果要添加功能，调用 DrawioUI.actions.addAction 就行了，控制UI和增加方法，就可以在不改动源码的情况下实现二开了。</p>
<p>发布版请前往星球下载<br>
由于项目使用了 FineUICore 所以完整的发布版在 FineUI 知识星球</p>
<figure data-type="image" tabindex="7"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e7afa9aa106543469c752b3dd2236f03~tplv-k3u1fbpfcp-zoom-1.image" alt="" loading="lazy"></figure>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/4gOKry8Qv/" class="tag">
                    .Net Core
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/shi-chang-xing-ye-yan-jiu-bao-gao-can-kao-jie-gou/">
                  <h3 class="post-title">
                    市场行业研究报告参考结构
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
